<?php require __DIR__ . '/../inc_header.tpl.php';?>

        
<span class="layui-breadcrumb">
    <a href="<?php echo url(['platform','platform','index']);?>">控制台</a>
    <a href="">微信公众号</a>
    <a><cite>设置</cite></a>
</span>

<div class="layui-tab layui-tab-brief">
  <ul class="layui-tab-title">
    <li><a href="<?php echo url(['platform','wechat','wxweb']);?>">微信公众号</a></li>
    <li  class="layui-this"><a class="layui-this" href="<?php echo url(['platform','wechat','menu']);?>">微信公众号菜单</a></li>
    <li><a href="<?php echo url(['platform','wechat','wxapp']);?>">微信小程序</a></li>
    <li><a href="<?php echo url(['platform','wechat','pay']);?>">微信支付</a></li>
  </ul>
</div>    
<br>

<?php //print_r( $menu_list); ?>


<div class="wx-container">
  <div class="wx-box">
    <div class="wx-header">微信公众号</div>
    <div class="wx-body"></div>
    <div class="wx-footer">
      <!-- <div class="wx-menu">
        <span>菜单名称</span>
        <div class="wx-menu-child">
          <div data-type="view" data-val="">子菜单名称</div>
          <div>子菜单名称</div>
          <p>+</p>
        </div>
      </div>
      <div class="wx-menu">
        <span>菜单名称</span>
        <div class="wx-menu-child">
          <div>子菜单1</div>
          <div>子菜单2</div>
          <div>子菜单3</div>
          <p>+</p>
        </div>
      </div>
      <div class="wx-menu wx-menu-add"><span>+</span></div> -->
    </div>
  </div>

  <div class="wx-editor">

    <div class="wx-editor-head">当前菜单<span class="menu-delete">删除该菜单</span></div>




    <div class="wx-editor-body">
    <form class="layui-form" >
      <div class="layui-form-item">
        <label class="layui-form-label">菜单名称:</label>
        <div class="layui-input-inline">
          <input type="text" class="layui-input" id="wx-menu-name" placeholder="菜单名称">
        </div>
        <div class="layui-form-mid layui-word-aux">字数不超过4个汉字或8个字母</div>
      </div>

      <div class="layui-form-item" id="menu_type">
        <label class="layui-form-label">菜单类型:</label>
        <div class="layui-input-block">
          <input type="radio"  lay-filter="wx-type" name="wx-type" value="view" title="跳转网页" checked>
        </div>
      </div>




    <div class="layui-form-item" id="menu_val">
      <label class="layui-form-label">菜单值:</label>
      <div class="layui-input-block">
        <input type="text" class="layui-input" id="wx-menu-val" placeholder="菜单包含的值">
        <div class="layui-word-aux">请输入包含http://或者https://的完整链接</div>
      </div>
    </div> 

    </form>
  </div>



    
  </div>
</div>

<div style="text-align: center;padding:20px;">
  <button class="layui-btn" id="menu_save" >保存提交</button>
</div>


<?php require __DIR__ . '/../inc_footer.tpl.php';?>

<style>
/*.layui-form-label{width: 240px;}  默认 width80 + padding 15 x 2  = 110px */
/*.layui-input-block{margin-left:270px; line-height: 36px;}  默认110px */
</style>
<style>
/** 微信公众号 菜单 */
.wx-container{ position: relative;padding-left:20px;  }
.wx-container .wx-box{ width:300px;border:1px solid #888;box-shadow: 0 1px 5px #a9a9a9;user-select: none;}
.wx-container .wx-box .wx-header{ height: 40px; background:#464646;color:#fff;text-align: center;line-height: 40px;  }
.wx-container .wx-box .wx-body{ height: 400px; }
.wx-container .wx-box .wx-footer{ height: 50px;border-top: 1px solid #bbb;position: relative; }
.wx-container .wx-box .wx-footer .wx-menu{float:left; position: relative;width:33.33%;height:50px;box-sizing: border-box;border-right:1px solid #bbb;border-top:none;border-bottom-color: #888;
                                            cursor: pointer;text-align: center;background: #eee;}
.wx-container .wx-box .wx-footer .wx-menu span{display:block;height:50px;line-height:50px;}

.wx-container .wx-box .wx-footer .wx-menu .active{border:1px solid #23b7e5 !important;margin-top:-1px;}

.wx-container .wx-box .wx-footer .wx-menu:hover{background-color: #ccc;}
.wx-container .wx-box .wx-footer .wx-menu:last{ border-left:none; }
.wx-container .wx-box .wx-footer .wx-menu-add{float:left; position: relative;width:33.33%;height:50px;box-sizing: border-box;border-right:1px solid #bbb;border-top:none;border-bottom-color: #888;
                                            cursor: pointer;text-align: center;line-height:50px; background: #eee;}


.wx-container .wx-box .wx-footer .wx-menu .wx-menu-child{position: absolute;left:2px;right:2px;bottom: 55px;border:1px solid #bbb;box-shadow: 0 1px 3px rgba(0,0,0,.2);}
.wx-container .wx-box .wx-footer .wx-menu .wx-menu-child div,p{box-sizing: border-box;border-bottom:1px solid #bbb;background: #eee;cursor: pointer;text-align: center;line-height:45px;}
.wx-container .wx-box .wx-footer .wx-menu .wx-menu-child div:hover{background-color: #ccc;}


/** 编辑 */
.wx-container .wx-editor{ position: absolute;top:0;left:0;right:0;left:350px;bottom:0; min-width:500px;border:1px solid #888;padding:20px;}
.wx-editor .wx-editor-head { padding-bottom: 8px; padding-left: 10px; border-bottom: 1px solid #e8e8e8;}
.wx-editor .wx-editor-head .menu-delete { float: right; font-size: 12px; color: #de5044; cursor: pointer;}

.wx-editor .wx-editor-body{ padding-top:10px;}
</style>
<script>

var str_html ='';

var menu_list = <?php echo json_encode( $menu_list['menu'] ); ?> ; // php输出菜单数组

/*
// 测试数据
var menu_list = {
     "button":[
      {    
          "type":"click",
          "name":"今日歌曲",
          "key":"V1001_TODAY_MUSIC"
      },
      {
           "name":"菜单",
           "sub_button":[
           {    
               "type":"view",
               "name":"搜索",
               "url":"http://www.soso.com/"
            },
            {
               "type":"view",
               "name":"视频",
               "url":"http://v.qq.com/"
            },
            {
               "type":"click",
               "name":"赞一下我们",
               "key":"V1001_GOOD"
            }]
       }]
 };
*/



layui.use(['layer', 'form'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;

    // 添加一级菜单
    function menu_add(){
      if( $('.wx-footer .wx-menu-add').length<1 ){
        $('.wx-footer').append('<div class="wx-menu-add"><span>+</span></div>');
      }
    }


    function init(){
      if( menu_list==null ){
		  layer.msg('微信公众号菜单异常'); 
	  }
      if( menu_list.length==0 ){
        menu_add();
      }else{
        for(var i in menu_list.button){
          str_html+='<div class="wx-menu">';
          //修改 判断是否是空数组
          if(menu_list.button[i].sub_button.length!=0){
            str_html+='<span data-type=""  data-val="" >';
          }else{
            str_html+='<span data-type="'+ menu_list.button[i].type +'" data-val="';
            switch( menu_list.button[i].type ){
              case 'view':
                str_html+= menu_list.button[i].url ;
                break;
              case 'click':
                str_html+= menu_list.button[i].key ;
                break;
            }
            str_html+= '" >';
          }

          str_html+=  menu_list.button[i].name +'</span>';
          str_html+='<div class="wx-menu-child">';
          if(menu_list.button[i].sub_button){
            for(var ii in menu_list.button[i].sub_button){
              str_html+='<div data-type="'+ menu_list.button[i].sub_button[ii].type +'" data-val="';
              switch( menu_list.button[i].sub_button[ii].type ){
                case 'view':
                  str_html+= menu_list.button[i].sub_button[ii].url ;
                  break;
                case 'click':
                  str_html+= menu_list.button[i].sub_button[ii].key ;
                  break;
              } 
              //隐藏菜单类型            
              //str_html+=  menu_list.button[i].sub_button[ii].type +'" >'+ menu_list.button[i].sub_button[ii].name +'</div>';
              str_html+= '" >'+ menu_list.button[i].sub_button[ii].name +'</div>';
            }
          }

          str_html+='<p>+</p>';
          str_html+='</div>';
          str_html+='</div>';

        }
        if(menu_list.button.length<3){
          str_html+='<div class=" wx-menu-add"><span>+</span></div>';
        }
        //console.log(str_html);
        $('.wx-footer').html(str_html);

      }
      
    }


    // 执行初始化
    init();
    


    // 添加一级菜单
    $('.wx-footer').on('click','.wx-menu-add',function(){
      if( $('.wx-menu').length<2){
        $('.wx-footer .wx-menu-add').before('<div class="wx-menu"> <span data-type="view"  data-val="">菜单名称</span><div class="wx-menu-child">  <p>+</p> </div></div>');        
      }else{
        $('.wx-menu-add').remove();
        $('.wx-footer').append('<div class="wx-menu"> <span data-type="view"  data-val="">菜单名称</span><div class="wx-menu-child">  <p>+</p> </div></div>');
      }
    });
    //
    $('.wx-footer').on('click','.wx-menu-child p',function(){
      if($(this).siblings('div').length<5 ){
        $(this).parent().prepend('<div data-type="view"  data-val="" >子菜单名称</div>');
      }
    });

    // 一级菜单事件
    $('.wx-footer').on('click','.wx-menu span',function(){
      $('.wx-footer .wx-menu span').removeClass('active');
      $('.wx-footer .wx-menu-child div').removeClass('active');
      $(this).addClass('active');
      
      //判断是否有子栏目  有：隐藏 菜单类型、菜单值    没有：显示
      //console.log( $(this).next().children().text().length );
      var if_child = $(this).next().children().text().length ;
      if(if_child>1){
        $('#menu_type').hide();
        $('#menu_val').hide();
      }else{
        $('#menu_type').show();
        $('#menu_val').show();
      }
      $('#wx-menu-name').val( $(this).html() );
      //$(this).attr('data-type')
      $('#wx-menu-val').val( $(this).attr('data-val') );

    });

    // 二级菜单事件
    $('.wx-footer').on('click','.wx-menu-child div',function(){
        $('.wx-footer .wx-menu span').removeClass('active');
        $('.wx-footer .wx-menu-child div').removeClass('active');
        $(this).addClass('active');
        $('#wx-menu-name').val( $(this).html() );
        $('#wx-menu-val').val( $(this).attr('data-val') );

        //显示右侧菜单选项
        $('#menu_type').show();
        $('#menu_val').show();

    });

    //菜单名称
    $('#wx-menu-name').on('keyup',function(){
      $('.wx-footer .active').html(  $(this).val() );
      $('.wx-footer .active').attr( 'data-val', '');
      //$('.wx-footer .active').attr( 'data-val', '');
    });

    //菜单类型
    form.on('radio(wx-type)', function(data){
      $('.wx-footer .active').attr( 'data-type',$(this).val() );
    });

    //菜单值
    $('#wx-menu-val').on('keyup',function(){
      $('.wx-footer .active').attr( 'data-val', $(this).val() );
    });

    // 删除菜单
    $('.menu-delete').on('click',function(){
      if( $('.wx-footer .active').siblings('p').length>0){
        $('.wx-footer .active').remove( ); // 二级菜单
      }else{
        // 一级菜单
        $('.wx-footer .active').parent().remove( );        
        menu_add();
      }
    });

    // 保存菜单
    $('#menu_save').on('click',function(){
      var m={'button':[]};
      // 循环生成一级菜单
      $('.wx-menu').each(function( i ){
        //console.log( el.text );
        m.button[i] ={ name:$(this).find('span').first().text() };
        // 循环生成二级菜单
        var menu_child = $(this).find('.wx-menu-child div');
        if(menu_child.length==0){
          //增加菜单类型
          m.button[i].type = $(this).find('span').first().attr('data-type') ;
          switch( $(this).find('span').first().attr('data-type') ){
              case 'view':
                m.button[i].url = $(this).find('span').first().attr('data-val') ;
                break;
              case 'click':
                m.button[i].key = $(this).find('span').first().attr('data-val');
                break;
            }

        }else{
           m.button[i].sub_button=[];
           menu_child.each(function(ii){
            m.button[i].sub_button[ii] = { type:$(this).attr('data-type'),name:$(this).text() };
            //增加菜单类型
            m.button[i].sub_button[ii].type = $(this).attr('data-type') ;
            switch( $(this).attr('data-type') ){
              case 'view':
                m.button[i].sub_button[ii].url = $(this).attr('data-val') ;
                break;
              case 'click':
                m.button[i].sub_button[ii].key = $(this).attr('data-val');
                break;
            }
           });
        }


      });


      // ajax提交api
      //console.log( JSON.stringify(m) );
      $.post("<?php echo url(['platform','wechat','menu_save']);?>",{menu:JSON.stringify(m)},function(data){
        if(data.code==1){
          layer.msg(data.msg); 
        }else{
          layer.msg(data.msg); 
        }
      },'json');


    });
    


});   


</script>

  
<script src="<?php echo _APP_URL_;?>/library/jquery/jquery-ui.min.js"></script>
<script>
$( function() {
	//$(".wx-footer").sortable({items:".wx-menu",axis:"x",handle:'span'});
	//$(".wx-footer").sortable({items:".wx-menu-child div",axis:"y"});

	$(".wx-menu-child").sortable({items:"div",axis:"y"});
	$(".wx-footer").sortable({items:".wx-menu",axis:"x",handle:'span'});

} );
</script>